<template>
  <el-dialog title="查看物流" :visible.sync="showDialog" :before-close= "handleClose" size="tiny">
    <div class="expressShow-status">
                物流状态：<span>{{ expressShow.status | expressStatus}}</span>
    </div>
    <div class="sendshow-workflow" v-if="expressShow.itemList && expressShow.itemList.length>0">
      <li v-for="(item,index) in expressShow.itemList" :key="index" :class="index==0?'':'disabled'">
        <div class="item"></div>
        <div class="content">
          <p class="text">{{item.content}}</p>
          <p class="time">{{item.time | FormatDate }}</p>
        </div>
      </li>
    </div>
    <e-placeholder v-else text="暂无物流信息!"></e-placeholder>
    <div class="sendshow-item">
      <div class="leftimg">
        <img v-if="expressShow.goodsList && expressShow.goodsList.length>0"
          :src="expressShow.goodsList[0].imgList[0].goodsImgUrl">
      </div>
      <div class="text">
        <p>承运来源：{{expressShow.companyName}}</p>
        <p>订单编号：{{data.orderNo}}</p>
        <p>物流编号：<span v-if="expressShow.goodsList && expressShow.goodsList.length>0">{{expressShow.goodsList[0].expressNo}}</span></p>
      </div>
    </div>
  </el-dialog>
</template>
<script>
  import {form} from 'utils/mixins' // 引入form mixin
  import api from 'api/express'
  export default{
    mixins: [form],
    props: {
      showDialog: {},
      data: {}
    },
    data () {
      return {
        expressShow: {}
      }
    },
    watch: {
      data () {
        if (this.data && this.data.companyCode) {
          api.send_show({
            orderNo: this.data.orderNo
          }).then((json) => {
            this.expressShow = json.data
            console.log(json)
          })
        }
      }
    },
    methods: {
      handleClose () {
        this.$emit('update:showDialog', false)
        this.expressShow = {}
      },
      submit () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.handleClose()
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  
  .expressShow{
    /*.el-step{
      vertical-align: middle;
      width: auto !important;
      margin-left:60px
    }*/
  }
  .sendshow-workflow{
    max-height: 400px;
    overflow: auto;
    margin-bottom: 20px;
    padding-left: 30px;
    margin-top:40px;
    li{
      list-style: none;
      padding-left: 30px;
      padding-bottom: 30px;
      position: relative;
      &:after{
        content: '';
        display: block;
        position: absolute;
        left: 4px;
        top: 5px;
        bottom: -5px;
        width: 1px;
        background: #dcdcdc;
        z-index: 5;
      }
      &:last-child:after {
        background: #FFFFFF;
      }
      .item {
        position: absolute;
        left: 0;
        top: 5px;
        width: 9px;
        height: 9px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        background: $color-primary;
        color: #FFFFFF;
        z-index: 6;
      }
      .content {
        padding: 0;
        p{
          font-size: 14px;
          line-height: 20px;
          color: $color-primary;
        }
        .mr10{
          margin-right: 10px;
        }
      }
      &.disabled{
        .item {
          background: #dcdcdc;
        }
        .content {
          p{
            color: #333 !important;
            &.time{
              color: #cdcdcd !important;
            }
          }
        }
      }
    }
  }
  .sendshow-item{
    padding-left: 30px;
    &:after{
      content: '';
      display: table;
      clear: both;
    }
    .leftimg{
      float: left;
      img{
        height: 60px;
        width: auto;
      }
    }
    .text{
      float: left;
      margin-left: 15px;
      line-height: 20px;
    }
  }
  .expressShow-status{
    padding-left: 30px;
    font-size: 18px;
    margin-bottom: 20px;
    span{
      color: $color-primary;
    }
  }
</style>
